{% extends 'base.html' %}
{% block content %}
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">Projects</span>
                        <h5>项目总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><a href="{% url 'project_list' %}">{{ projects.count}}</a></h1>
                        <small>All Project</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">PublishTasks</span>
                        <h5>发版总数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><a href="{% url 'publish_task_list' %}">{{ publishtasks.count }}</a></h1>
                        <small>All PublishTask</small>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">UnPublisheds</span>
                        <h5>待发版数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins"><a href="{% url 'publish_task_list' %}"> {{ unpublishtasks.count }}</a></h1>
                        <small>UnPublished</small>
                    </div>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">App Publish</span>
                        <h5>App 发版总数</h5>
                    </div>
                    <div class="ibox-content">
                            <h1 class="no-margins"><a href="{% url 'app_publish_task_list' %}"> {{ apppublishtasks.count }}</a></h1>
                        <small>All App PublishTask</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div id="month" style="height: 346px;padding: 15px 0 15px 0;"></div>
        </div>
        <br/>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>活跃项目</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user"></ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <div>
                        <table class="table">
                            <tr>
                                <th>项目</th>
                                <th>发版总数</th>
                            </tr>
                            {% for active in active_10 %}
                            <tr>
                                <td>{{ active.project }}</td>
                                <td>{{ active.times }}</td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>活跃提交人</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user"></ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <div>
                        <table class="table">
                            <tr>
                                <th>产品负责人</th>
                                <th>发版总数</th>
                            </tr>
                            {% for pm in pm_10 %}
                            <tr>
                                <td>{{ pm.owner }}</td>
                                <td>{{ pm.times }}</td>
                            </tr>
                            {% endfor %}
                        </table>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block self_footer_js %}
    <script src="/static/js/echarts/echarts.js"></script>
    <script>
        $(document).ready(function(){
            $('#show').click(function(){
                $('#show').css('display', 'none');
                $('#more').css('display', 'block');
            })
        });

        require.config({
            paths: {
                'echarts': '/static/js/echarts/chart',
                'echarts/chart/line': '/static/js/echarts/chart/line',
                'echarts/chart/pie': '/static/js/echarts/chart/pie'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line'
            ],
            function (ec) {
                var monthChart = ec.init(document.getElementById('month'));
                var option = {
                    title : {
                        text: '月数据总览',
                        subtext: '一个月内历史汇总',
                        x: 'center'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    backgroundColor: '#fff',
                    legend: {
                        data:['发版次数','回滚次数'],
                        y: 'bottom'
                    },
                    toolbox: {
                        show : false,
                        feature : {
    {#                        mark : {show: true},#}
    {#                        dataView : {show: true, readOnly: false},#}
                            magicType : {show: true, type: ['line', 'bar']}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : {{ date_month | safe}}
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'发版次数',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: {{ publishtask_deploy_per_month | safe }}
                        },
                        {
                            name:'回滚次数',
                            type:'line',
                            smooth:true,
                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
                            data: {{ publishtask_rollback_per_month | safe }}
                        }

                    ]
                };

                monthChart.setOption(option);
            }
        );
</script>
{% endblock %}